<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">
  <title>Zen 7.x-6.x Style Guide</title>

  <meta name="description" content="">
  <meta name="generator" content="kss-node">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="kss-assets/kss.css">
  <link rel="stylesheet" href="../css/styles.css">
<link rel="stylesheet" href="../css/style-guide/chroma-kss-styles.css">
<link rel="stylesheet" href="../css/style-guide/kss-only.css">

</head>
<body id="kss-node">

<div class="kss-sidebar kss-style">
  <header class="kss-header">
    <h1 class="kss-doc-title">Zen 7.x-6.x Style Guide</h1>
  </header>
  <nav class="kss-nav">
    <ul class="kss-nav__menu">
      <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="./">
          <span class="kss-nav__ref">0</span
          ><span class="kss-nav__name">Overview</span>
        </a>
      </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-sass.html">
          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
        </a>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-base.html">
          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
        </a>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-layouts.html">
          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
        </a>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-components.html">
          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
        </a>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-navigation.html">
          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
        </a>
                  <ul class="kss-nav__menu-child">
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-breadcrumb">
                <span class="kss-nav__ref ">5.1</span
                ><span class="kss-nav__name">Breadcrumb navigation</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-more-link">
                <span class="kss-nav__ref ">5.2</span
                ><span class="kss-nav__name">&quot;More&quot; link</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-nav-menu">
                <span class="kss-nav__ref ">5.3</span
                ><span class="kss-nav__name">Nav menu</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-navbar">
                <span class="kss-nav__ref ">5.4</span
                ><span class="kss-nav__name">Navbar</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-pager">
                <span class="kss-nav__ref ">5.5</span
                ><span class="kss-nav__name">Pager</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-skip-link">
                <span class="kss-nav__ref ">5.6</span
                ><span class="kss-nav__name">Skip link</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-tabs">
                <span class="kss-nav__ref ">5.7</span
                ><span class="kss-nav__name">Tabs</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-tabs-stacked">
                <span class="kss-nav__ref kss-nav__ref-child">5.7.1</span
                ><span class="kss-nav__name">Tabs (stacked)</span>
              </a>
            </li>
                    </ul>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-forms.html">
          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Forms</span>
        </a>
              </li>
        </ul>
  </nav>
</div>
<article role="main" class="kss-main">

  
          <div id="kssref-navigation" class="kss-section kss-section--depth-1">
      <div class="kss-style">
                <h1 class="kss-title kss-title--level-1">
          <a class="kss-title__permalink" href="#kssref-navigation">
            <span class="kss-title__ref">
              5
              <span class="kss-title__permalink-hash">
                navigation
              </span>
            </span>
            Navigation
          </a>
        </h1>

                  <div class="kss-description">
            <p>Navigation components are specialized design components that are used for
page navigation.</p>

          </div>
        
              </div>

      
              <div class="kss-source kss-style">
          Source: <code>styles.scss</code>, line 66
        </div>
          </div>
          <section id="kssref-navigation-breadcrumb" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-navigation-breadcrumb">
            <span class="kss-title__ref">
              5.1
              <span class="kss-title__permalink-hash">
                navigation.breadcrumb
              </span>
            </span>
            Breadcrumb navigation
          </a>
        </h2>

                  <div class="kss-description">
            <p>The path to the current page in the form of a list of links.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <nav class="breadcrumb " role="navigation">
  <h2 class="breadcrumb__title">You are here</h2>

  <ol class="breadcrumb__list">
    <li class="breadcrumb__item"><a href="#">Home</a> › </li>
    <li class="breadcrumb__item"><a href="#">Level 1</a> › </li>
    <li class="breadcrumb__item"><a href="#">Level 2</a> › </li>
    <li class="breadcrumb__item">Current item</li>
  </ol>
</nav>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;nav class=&quot;breadcrumb &quot; role=&quot;navigation&quot;&gt;
  &lt;h2 class=&quot;breadcrumb__title&quot;&gt;You are here&lt;/h2&gt;

  &lt;ol class=&quot;breadcrumb__list&quot;&gt;
    &lt;li class=&quot;breadcrumb__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt; › &lt;/li&gt;
    &lt;li class=&quot;breadcrumb__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Level 1&lt;/a&gt; › &lt;/li&gt;
    &lt;li class=&quot;breadcrumb__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Level 2&lt;/a&gt; › &lt;/li&gt;
    &lt;li class=&quot;breadcrumb__item&quot;&gt;Current item&lt;/li&gt;
  &lt;/ol&gt;
&lt;/nav&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>navigation/breadcrumb/_breadcrumb.scss</code>, line 4
        </div>
          </section>
          <section id="kssref-navigation-more-link" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-navigation-more-link">
            <span class="kss-title__ref">
              5.2
              <span class="kss-title__permalink-hash">
                navigation.more-link
              </span>
            </span>
            &quot;More&quot; link
          </a>
        </h2>

                  <div class="kss-description">
            <p>Styles the &quot;Read more…&quot; and &quot;Help&quot; links common in Drupal.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <div class="more-link ">
  <a href="#">Read more…</a>
</div>

<div class="more-link ">
  <a class="more-link__help-icon" href="#">Help</a>
</div>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;more-link &quot;&gt;
  &lt;a href=&quot;#&quot;&gt;Read more…&lt;/a&gt;
&lt;/div&gt;

&lt;div class=&quot;more-link &quot;&gt;
  &lt;a class=&quot;more-link__help-icon&quot; href=&quot;#&quot;&gt;Help&lt;/a&gt;
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>navigation/more-link/_more-link.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-navigation-nav-menu" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-navigation-nav-menu">
            <span class="kss-title__ref">
              5.3
              <span class="kss-title__permalink-hash">
                navigation.nav-menu
              </span>
            </span>
            Nav menu
          </a>
        </h2>

                  <div class="kss-description">
            <p>A &quot;nav menu&quot; is secondary, hierarchical navigation which can be displayed to the
side or below the main content.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <ul class="nav-menu ">
  <li class="nav-menu__item">
    <a href="/" class="nav-menu__link">Home</a>
  </li>
  <li class="nav-menu__item is-collapsed">
    <a href="#" class="nav-menu__link">Blandit Jugis Sudo</a>
  </li>
  <li class="nav-menu__item is-expanded is-active-trail">
    <a href="#" class="nav-menu__link is-active-trail">Causa Diam Jumentum Wisi</a>
    <ul class="nav-menu">
      <li class="nav-menu__item">
        <a href="#" class="nav-menu__link">Dolor Huic Oppeto</a>
      </li>
      <li class="nav-menu__item is-active-trail is-active">
        <a href="#" class="nav-menu__link is-active">Decet</a>
      </li>
      <li class="nav-menu__item is-collapsed">
        <a href="#" class="nav-menu__link">Aliquip Similis</a>
      </li>
    </ul>
  </li>
  <li class="nav-menu__item is-collapsed">
    <a href="#" class="nav-menu__link">Abigo Caecus Causa Illum</a>
  </li>
  <li class="nav-menu__item is-collapsed">
    <a href="#" class="nav-menu__link">Ibidem Sudo</a>
  </li>
</ul>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;nav-menu &quot;&gt;
  &lt;li class=&quot;nav-menu__item&quot;&gt;
    &lt;a href=&quot;/&quot; class=&quot;nav-menu__link&quot;&gt;Home&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-menu__item is-collapsed&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-menu__link&quot;&gt;Blandit Jugis Sudo&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-menu__item is-expanded is-active-trail&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-menu__link is-active-trail&quot;&gt;Causa Diam Jumentum Wisi&lt;/a&gt;
    &lt;ul class=&quot;nav-menu&quot;&gt;
      &lt;li class=&quot;nav-menu__item&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;nav-menu__link&quot;&gt;Dolor Huic Oppeto&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-menu__item is-active-trail is-active&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;nav-menu__link is-active&quot;&gt;Decet&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-menu__item is-collapsed&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;nav-menu__link&quot;&gt;Aliquip Similis&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-menu__item is-collapsed&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-menu__link&quot;&gt;Abigo Caecus Causa Illum&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-menu__item is-collapsed&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-menu__link&quot;&gt;Ibidem Sudo&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>navigation/nav-menu/_nav-menu.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-navigation-navbar" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-navigation-navbar">
            <span class="kss-title__ref">
              5.4
              <span class="kss-title__permalink-hash">
                navigation.navbar
              </span>
            </span>
            Navbar
          </a>
        </h2>

                  <div class="kss-description">
            <p>A simple method to get navigation links to appear in one line.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <ul class="navbar clearfix">
  <li class="navbar__item"><a href="#">Home</a></li>
  <li class="navbar__item"><a href="#">Blandit Jugis</a></li>
  <li class="navbar__item"><a href="#">Causa Diam</a></li>
  <li class="navbar__item"><a href="#">Abigo Caecus</a></li>
  <li class="navbar__item"><a href="#">Ibidem Sudo</a></li>
  <li class="navbar__item"><a href="#">Luctus Luptatum</a></li>
  <li class="navbar__item"><a href="#">Ut</a></li>
</ul>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;navbar clearfix&quot;&gt;
  &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Blandit Jugis&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Causa Diam&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Abigo Caecus&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Ibidem Sudo&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Luctus Luptatum&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Ut&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>navigation/navbar/_navbar.scss</code>, line 4
        </div>
          </section>
          <section id="kssref-navigation-pager" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-navigation-pager">
            <span class="kss-title__ref">
              5.5
              <span class="kss-title__permalink-hash">
                navigation.pager
              </span>
            </span>
            Pager
          </a>
        </h2>

                  <div class="kss-description">
            <p>Paged navigation is a list of page numbers when more than 1 page of content
is available.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <ul class="pager ">
  <li class="pager__item">
    <a title="Go to first page" href="/admin/content">« first</a>
  </li>
  <li class="pager__item">
    <a title="Go to previous page" href="/admin/content?page=1">‹ previous</a>
  </li>
  <li class="pager__item">
    <a title="Go to page 1" href="/admin/content">1</a>
  </li>
  <li class="pager__item">
    <a title="Go to page 2" href="/admin/content?page=1">2</a>
  </li>
  <li class="pager__current-item">3</li>
  <li class="pager__item">
    <a title="Go to page 4" href="/admin/content?page=3">4</a>
  </li>
  <li class="pager__item">
    <a title="Go to page 5" href="/admin/content?page=4">5</a>
  </li>
  <li class="pager__item">
    <a title="Go to next page" href="/admin/content?page=3">next ›</a>
  </li>
  <li class="pager__item">
    <a title="Go to last page" href="/admin/content?page=4">last »</a>
  </li>
</ul>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;pager &quot;&gt;
  &lt;li class=&quot;pager__item&quot;&gt;
    &lt;a title=&quot;Go to first page&quot; href=&quot;/admin/content&quot;&gt;« first&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;pager__item&quot;&gt;
    &lt;a title=&quot;Go to previous page&quot; href=&quot;/admin/content?page=1&quot;&gt;‹ previous&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;pager__item&quot;&gt;
    &lt;a title=&quot;Go to page 1&quot; href=&quot;/admin/content&quot;&gt;1&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;pager__item&quot;&gt;
    &lt;a title=&quot;Go to page 2&quot; href=&quot;/admin/content?page=1&quot;&gt;2&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;pager__current-item&quot;&gt;3&lt;/li&gt;
  &lt;li class=&quot;pager__item&quot;&gt;
    &lt;a title=&quot;Go to page 4&quot; href=&quot;/admin/content?page=3&quot;&gt;4&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;pager__item&quot;&gt;
    &lt;a title=&quot;Go to page 5&quot; href=&quot;/admin/content?page=4&quot;&gt;5&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;pager__item&quot;&gt;
    &lt;a title=&quot;Go to next page&quot; href=&quot;/admin/content?page=3&quot;&gt;next ›&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;pager__item&quot;&gt;
    &lt;a title=&quot;Go to last page&quot; href=&quot;/admin/content?page=4&quot;&gt;last »&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>navigation/pager/_pager.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-navigation-skip-link" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-navigation-skip-link">
            <span class="kss-title__ref">
              5.6
              <span class="kss-title__permalink-hash">
                navigation.skip-link
              </span>
            </span>
            Skip link
          </a>
        </h2>

                  <div class="kss-description">
            <p>To make the link completely hidden until a user tabs to the link, combine it
with the <code>visually-hidden</code> component.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Examples          </div>

                      <div class="kss-modifier__default-name kss-style">
              Default styling
            </div>
          
          <div class="kss-modifier__example">
            <p class="skip-link__wrapper">
  <a href="#main-menu" class="skip-link visually-hidden visually-hidden--focusable [modifier class]">Jump to navigation</a>
</p>

          </div>

                      <div class="kss-modifier__name kss-style">
              :focus
            </div>
            <div class="kss-modifier__description kss-style">
              Focus styling.
            </div>
            <div class="kss-modifier__example">
              <p class="skip-link__wrapper">
  <a href="#main-menu" class="skip-link visually-hidden visually-hidden--focusable pseudo-class-focus">Jump to navigation</a>
</p>

            </div>
                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class=&quot;skip-link__wrapper&quot;&gt;
  &lt;a href=&quot;#main-menu&quot; class=&quot;skip-link visually-hidden visually-hidden--focusable [modifier class]&quot;&gt;Jump to navigation&lt;/a&gt;
&lt;/p&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>navigation/skip-link/_skip-link.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-navigation-tabs" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-navigation-tabs">
            <span class="kss-title__ref">
              5.7
              <span class="kss-title__permalink-hash">
                navigation.tabs
              </span>
            </span>
            Tabs
          </a>
        </h2>

                  <div class="kss-description">
            <p>The primary and secondary tabs.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Examples          </div>

                      <div class="kss-modifier__default-name kss-style">
              Default styling
            </div>
          
          <div class="kss-modifier__example">
            <ul class="tabs [modifier class]">
  <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
</ul>

          </div>

                      <div class="kss-modifier__name kss-style">
              .tabs--secondary
            </div>
            <div class="kss-modifier__description kss-style">
              Secondary tabs
            </div>
            <div class="kss-modifier__example">
              <ul class="tabs tabs--secondary">
  <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
</ul>

            </div>
                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;tabs [modifier class]&quot;&gt;
  &lt;li class=&quot;tabs__tab is-active&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link is-active&quot;&gt;View &lt;span class=&quot;visually-hidden&quot;&gt;(active tab)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Edit&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Revisions&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>navigation/tabs/_tabs.scss</code>, line 4
        </div>
          </section>
          <section id="kssref-navigation-tabs-stacked" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-navigation-tabs-stacked">
            <span class="kss-title__ref">
              5.7.1
              <span class="kss-title__permalink-hash">
                navigation.tabs.stacked
              </span>
            </span>
            Tabs (stacked)
          </a>
        </h3>

                  <div class="kss-description">
            <p>When the secondary tabs appear directly after the primary tabs, the styling
is slightly different.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <ul class="tabs ">
  <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
</ul>

<ul class="tabs tabs--secondary">
  <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
</ul>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;tabs &quot;&gt;
  &lt;li class=&quot;tabs__tab is-active&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link is-active&quot;&gt;View &lt;span class=&quot;visually-hidden&quot;&gt;(active tab)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Edit&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Revisions&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ul class=&quot;tabs tabs--secondary&quot;&gt;
  &lt;li class=&quot;tabs__tab is-active&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link is-active&quot;&gt;View &lt;span class=&quot;visually-hidden&quot;&gt;(active tab)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Edit&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Revisions&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>navigation/tabs/_tabs.scss</code>, line 14
        </div>
          </section>
  </article>

<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script>
  prettyPrint();
  var spy = new ScrollSpy('#kss-node', {
    nav: '.kss-nav__menu-child > li > a',
    className: 'is-in-viewport'
  });
</script>




<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>
